<template>
    <div class="search-song-list">
      <play-list :playList="playList" path="song-sheet-detail"></play-list>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, computed, watch, onMounted } from "vue";
  import { useStore } from "vuex";
  import { useRouter } from "vue-router";
  import PlayList from "@/components/PlayList.vue";
  import { HttpManager } from "@/api";
  import { ElMessage } from "element-plus";
  
  const store = useStore();
  const route = useRouter();
  
  const playList = ref([]);
  const searchWord = computed(() => store.getters.searchWord);
  watch(searchWord, (value) => {
    getSearchList(value);
  });
  
  async function getSearchList(value) {
    if (!value) return;
    const result =  (await HttpManager.getSongListOfLikeTitle(value)) as ResponseBody;
    if (!result.data.length) {
      ElMessage({
        message: "暂无该歌曲内容",
        type: "warning",
      });
    } else {
      playList.value = result.data;
    }
  }
  
  onMounted(() => {
    getSearchList(route.currentRoute.value.query.keywords);
  });
  </script>